<template>
  <div class="admin-login-debug-container">
    <div class="test-card">
      <h2>🔍 管理员登录调试</h2>
      
      <div class="test-section">
        <h3>1. 请求数据调试</h3>
        <p>查看前端发送的具体数据</p>
        <el-form :model="adminForm" label-width="100px">
          <el-form-item label="管理员账号">
            <el-input v-model="adminForm.username" placeholder="请输入管理员账号" />
          </el-form-item>
          <el-form-item label="管理员密码">
            <el-input v-model="adminForm.password" type="password" placeholder="请输入管理员密码" />
          </el-form-item>
          <el-form-item>
            <el-button @click="debugLogin" :loading="loading" type="primary">调试登录</el-button>
            <el-button @click="testDirectAPI" type="success">直接API测试</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="test-section">
        <h3>2. 请求详情</h3>
        <div class="debug-info">
          <h4>发送的数据:</h4>
          <pre class="json-display">{{ JSON.stringify(requestData, null, 2) }}</pre>
        </div>
      </div>

      <div class="test-section">
        <h3>3. 响应详情</h3>
        <div class="debug-info">
          <h4>响应状态:</h4>
          <p>{{ responseStatus }}</p>
          <h4>响应数据:</h4>
          <pre class="json-display">{{ JSON.stringify(responseData, null, 2) }}</pre>
        </div>
      </div>

      <div class="test-section">
        <h3>4. 错误详情</h3>
        <div class="debug-info" v-if="errorInfo">
          <h4>错误信息:</h4>
          <pre class="error-display">{{ errorInfo }}</pre>
        </div>
      </div>

      <div class="test-section">
        <h3>5. 网络请求详情</h3>
        <div class="debug-info">
          <p><strong>请求URL:</strong> {{ requestUrl }}</p>
          <p><strong>请求方法:</strong> POST</p>
          <p><strong>Content-Type:</strong> application/json</p>
          <h4>请求Headers:</h4>
          <pre class="json-display">{{ JSON.stringify(requestHeaders, null, 2) }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { adminLogin } from '@/utils/apiService'
import api from '@/utils/api'

// 状态
const loading = ref(false)
const requestData = ref({})
const responseData = ref({})
const responseStatus = ref('')
const errorInfo = ref('')
const requestUrl = ref('')
const requestHeaders = ref({})

// 管理员表单
const adminForm = reactive({
  username: 'admin',
  password: 'admin123'
})

// 调试登录
const debugLogin = async () => {
  loading.value = true
  errorInfo.value = ''
  
  try {
    // 准备请求数据
    const loginData = {
      username: adminForm.username,
      password: adminForm.password
    }
    
    requestData.value = loginData
    requestUrl.value = `${api.defaults.baseURL}/admin/login`
    requestHeaders.value = {
      'Content-Type': 'application/json',
      ...api.defaults.headers
    }
    
    console.log('🚀 发送登录请求:', loginData)
    
    // 调用登录API
    const response = await adminLogin(loginData)
    
    responseStatus.value = `${response.status} ${response.statusText}`
    responseData.value = response.data
    
    console.log('✅ 登录响应:', response.data)
    
    if (response.data.code === 200) {
      ElMessage.success('登录成功')
    } else {
      ElMessage.error(`登录失败: ${response.data.message}`)
    }
    
  } catch (error) {
    console.error('❌ 登录错误:', error)
    
    responseStatus.value = error.response ? `${error.response.status} ${error.response.statusText}` : 'Network Error'
    responseData.value = error.response?.data || {}
    
    errorInfo.value = `
错误类型: ${error.name}
错误消息: ${error.message}
响应状态: ${error.response?.status}
响应数据: ${JSON.stringify(error.response?.data, null, 2)}
请求配置: ${JSON.stringify(error.config, null, 2)}
    `
    
    ElMessage.error(`登录失败: ${error.response?.data?.message || error.message}`)
  } finally {
    loading.value = false
  }
}

// 直接API测试
const testDirectAPI = async () => {
  loading.value = true
  errorInfo.value = ''
  
  try {
    const loginData = {
      username: adminForm.username,
      password: adminForm.password
    }
    
    requestData.value = loginData
    requestUrl.value = `${api.defaults.baseURL}/admin/login`
    
    console.log('🚀 直接API测试:', loginData)
    
    // 直接使用axios实例
    const response = await api.post('/admin/login', loginData)
    
    responseStatus.value = `${response.status} ${response.statusText}`
    responseData.value = response.data
    
    console.log('✅ 直接API响应:', response.data)
    
    if (response.data.code === 200) {
      ElMessage.success('直接API测试成功')
    } else {
      ElMessage.error(`直接API测试失败: ${response.data.message}`)
    }
    
  } catch (error) {
    console.error('❌ 直接API错误:', error)
    
    responseStatus.value = error.response ? `${error.response.status} ${error.response.statusText}` : 'Network Error'
    responseData.value = error.response?.data || {}
    
    errorInfo.value = `
错误类型: ${error.name}
错误消息: ${error.message}
响应状态: ${error.response?.status}
响应数据: ${JSON.stringify(error.response?.data, null, 2)}
    `
    
    ElMessage.error(`直接API测试失败: ${error.response?.data?.message || error.message}`)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.admin-login-debug-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.test-card h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f8f9fa;
}

.test-section h3 {
  margin-top: 0;
  color: #34495e;
  margin-bottom: 15px;
}

.test-section p {
  color: #7f8c8d;
  margin-bottom: 15px;
}

.debug-info {
  background: #ffffff;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #3498db;
}

.debug-info h4 {
  margin-top: 0;
  color: #2c3e50;
  margin-bottom: 10px;
}

.json-display {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e1e8ed;
}

.error-display {
  background: #fff5f5;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #fed7d7;
  color: #c53030;
}

.el-button {
  margin-right: 10px;
}
</style>
